import * as React from 'react'
import { NavBar, Item } from 'components'
import './OrderDetail.less'
import { showPhone } from '../../methods'
import { post } from '../../../../utils'

export default class OrderDetail extends React.Component<any, any> {

    public state = {
        data: {
            order_no: '',
            gmprice: '',
            price: '',
            seller_user_name: '',
            discount: '',
            create_time: '',
        }
        
    }
    public componentDidMount () {
        this.getData()
    }

    public render(): JSX.Element {
        const { data } = this.state
        return (
            <div className="myBeansOrder">
                <NavBar
                    title="订单详情"
                    fixed={true}
                />
                <div className="orderDetail_content">
                    <Item 
                        className="orderDetail_content_item" 
                        title={<div className="orderDetail_content_item_titleWrap">
                            <span className="orderDetail_content_item_title">订单号</span>
                            <span className="orderDetail_content_item_value">{data.order_no}</span>
                        </div>} 
                    />
                    <Item 
                        className="orderDetail_content_item" 
                        title={<div className="orderDetail_content_item_titleWrap">
                            <span className="orderDetail_content_item_title">购买数量</span>
                            <span className="orderDetail_content_item_value">{data.gmprice}</span>
                        </div>} 
                    />
                    <Item 
                        className="orderDetail_content_item" 
                        title={<div className="orderDetail_content_item_titleWrap">
                            <span className="orderDetail_content_item_title">支付金额</span>
                            <span className="orderDetail_content_item_value">{data.price && parseFloat(data.price).toFixed(2)}元</span>
                        </div>} 
                    />
                    <Item 
                        className="orderDetail_content_item" 
                        title={<div className="orderDetail_content_item_titleWrap">
                            <span className="orderDetail_content_item_title">转让人</span>
                            <span className="orderDetail_content_item_value">{data.seller_user_name && data.seller_user_name.length === 11 && showPhone(data.seller_user_name)}</span>
                        </div>} 
                    />
                    <Item 
                        className="orderDetail_content_item" 
                        title={<div className="orderDetail_content_item_titleWrap">
                            <span className="orderDetail_content_item_title">转让折扣</span>
                            <span className="orderDetail_content_item_value">{data.discount}折</span>
                        </div>} 
                    />
                    <Item 
                        className="orderDetail_content_item" 
                        title={<div className="orderDetail_content_item_titleWrap">
                            <span className="orderDetail_content_item_title">购买时间</span>
                            <span className="orderDetail_content_item_value">{data.create_time}</span>
                        </div>} 
                    />

                </div>
            </div>
        )
    }
    private getData = () => {
        const { userInfo } = this.props
        post('beanapi/beanUserBuyShow', {
            userId: userInfo.id,
            id: this.props.match.params.id
        }).then((data: any) => {
            this.setState({
                data
            })
        })
    }

}